<template>
  <div id="wrapper">
    <h1 class="headline">
      <span class="accent">演示</span> 通用设置
    </h1>
    <div class="description">
      软件首选参数独写采用了electron-store库，读取的字典文件位于 public/meta/dict.json，<br>
      初始化或个性化修改后的保存在用户的安装数据目录：<br>{{settingPath}} 。
      <br>

    </div>
    
    <div class="form">     

    <a-form :model="userData" :label-col="{style:{width:'120px'}}" :wrapper-col="{span:17}">

    <a-form-item label="团队名称" name="team" :rules="[{ required: true, message: '输入昵称', trigger: 'change' }]">
      <a-input v-model:value="userData.team" />
    </a-form-item>

    <a-form-item label="科目">
      <a-checkbox-group v-model:value="userData.subject">
        <a-checkbox v-for="item in metaData.subject"
        :key="item.id" :value="item.title"         
        >{{ item.title }}</a-checkbox>
      </a-checkbox-group>
    </a-form-item>

    <a-form-item label="免登录进入">
      <a-switch v-model:checked="userData.startup" />
    </a-form-item>

    <a-form-item label="进入页面">
      <a-radio-group v-model:value="userData.pages">       
         <a-radio v-for="(item) in metaData.pages"
        :value="item.path" name="pages">{{ item.title }}</a-radio>
      </a-radio-group>
    </a-form-item>

    <a-form-item :wrapper-col="{ span:0, offset:0 }">
      <a-button style="margin-left: 120px;" type="primary" @click="onSubmit">保存设置</a-button>
    </a-form-item>
  </a-form>

</div>


  </div>
</template>

<script setup>
import { ipcApiRoute } from "@/api/main";
import { ipc, isEE } from "@/utils/ipcRenderer";
import { reactive,ref, toRaw, onBeforeMount } from 'vue';
import { message } from 'ant-design-vue';

//实际应该从数据库读取，此处仅为演示用例。
const userData= reactive({
  startup: true,
  check_weekly: 0,
  subject: ["2"], 
  team: "腾讯集团有限公司",
  pages: "/icons",
});
const settingPath = ref(" - ");

//元数据样本，用于渲染表单控件的选项列表等，正常会从主进程读取。
const metaData = reactive({
  subject: [{"id":1,"title":"语文"},{"id":2,"title":"数学"}], 
  check_weekly: [{"id":0,"title":"每次启动"}],
  pages: [{"path":"/icons","title":"图标页"}],
});

// watch(userData, (newVal) => {
//   console.log("userData:", newVal);
// });

onBeforeMount(() => {
  getMetaData();
  getUserData();
  readConfig();
});

const onSubmit = () => {
  if (isEE) {
    ipc.invoke(ipcApiRoute.setting.saveSetting, toRaw(userData)).then((r) => {
      console.log("submit ok!", r);
      message.success('提交成功!');
    });
  } else {
    message.fail('开发模式，无法保存数据!');
    console.log('submit!', toRaw(userData));
  }
  
};

const readConfig = () => {
  if (isEE) {
    ipc.invoke(ipcApiRoute.config.getPath).then((res) => {
      console.log("getInfo:", res);
      settingPath.value = res;
    });  
  } 
};
//读取客户自定义选项
function getUserData () {
  if (isEE) {
    ipc.invoke(ipcApiRoute.setting.getUserData).then((rep) => {
      rep && rep.data && rep.data.forEach(item => {
        for (let key in item) {
          userData[key] = item[key];
          // console.log(`${key}`, item[key]);
        }
      });
    });
  } else {
    message.success('未启动IPC通信服务，元数据无法读取');
    console.log("未启动IPC通信服务，元数据无法读取");
  }
};

// 读取选项元数据
function getMetaData () {
  if (isEE) {
    ipc.invoke(ipcApiRoute.setting.getSettingMeta).then((r) => {
      r && r.data ? r.data.forEach(item => {
        for (let key in item) {
          metaData[key] = item[key];
         console.log(`${key}`, item[key]);
        }       
      }):"";
    });
  } else {
    console.log("开发模式无法启动IPC通信服务，元数据无法读取");
  }
};



</script>


<style lang="less" scoped>
.headline {
  font-size: 22px;
  line-height: 1.2;
  font-weight: bold;
  letter-spacing: -1.2px;
  margin: 10px auto 20px;
}

html:not(.dark) .accent {
  background: -webkit-linear-gradient(315deg, #42d392 25%, #647eff);
  background-clip: text;
  letter-spacing: 1.5px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.description {
  line-height: 1.5;
  font-size: 14px;
  margin: 10px auto 15px;
}

.form{
  margin-top: 40px;
  margin-right: 20px;
}
</style>